<div id="wmd-preview" class="wmd-preview">
    <blockquote data-anchor-id="04mn" class="white-blockquote">
        <p>冰里残阳透余辉，破戎折戟战后归。谁言棋败势不回，就凭风影亦要飞。</p>
    </blockquote>
    <h3 data-anchor-id="wiak" id="用法">用法</h3>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="z2im"><ol class="linenums"><li class="L0"><code><span class="kwd">var</span><span class="pln"> jroll </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">JRoll</span><span class="pun">(</span><span class="pln">selector </span><span class="pun">[,</span><span class="pln"> </span><span class="pun">{...}]);</span></code></li></ol></pre>
    <p data-anchor-id="ywsl">selector是容器，可以是id选择器字符串<code>#wrapper</code>，也可以是dom对象<code>document.getElementById('wrapper')</code>，第二个参数是可选对象，该参数内容决定了创建一个怎样的JRoll对象
        <br> 例：创建一个带滚动条兼可回弹的滚动对象
    </p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="sbhn"><ol class="linenums"><li class="L0"><code><span class="kwd">var</span><span class="pln"> jroll </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">JRoll</span><span class="pun">(</span><span class="str">"#wrapper"</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">scrollBar</span><span class="pun">:</span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> bounce</span><span class="pun">:</span><span class="kwd">true</span><span class="pun">});</span></code></li></ol></pre>
    <p data-anchor-id="8mqo">保存了JRoll对象后，可动态对可选参数进行修改</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="5l1i"><ol class="linenums"><li class="L0"><code><span class="pln">jroll</span><span class="pun">.</span><span class="pln">options</span><span class="pun">.</span><span class="pln">bounce </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span></code></li></ol></pre>
    <p data-anchor-id="s15o">如上设置后将禁止jroll回弹</p>
    <div class="md-section-divider"></div>
    <h3 data-anchor-id="jaju" id="可选参数">可选参数</h3>
    <table data-anchor-id="xa9q" class="table table-striped-white table-bordered">
        <thead>
            <tr>
                <th>可选值</th>
                <th style="text-align:center;">默认值</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>scroll</td>
                <td style="text-align:center;">true</td>
                <td>使能滑动</td>
            </tr>
            <tr>
                <td>scrollX</td>
                <td style="text-align:center;">true</td>
                <td>使能横向滑动</td>
            </tr>
            <tr>
                <td>scrollY</td>
                <td style="text-align:center;">true</td>
                <td>使能竖向滑动</td>
            </tr>
            <tr>
                <td>scrollFree</td>
                <td style="text-align:center;">false</td>
                <td>使能自由滑动，默认情况下，x方向在滑动时，y方向不能滑动，相反亦然，如果应用于对图片进行放大滑动，可将此参数设为true，如果此参数设为true，请务必将bounce设为false，否则将影响滑动效果</td>
            </tr>
            <tr>
                <td>zoom</td>
                <td style="text-align:center;">false</td>
                <td>使能缩放</td>
            </tr>
            <tr>
                <td>zoomMin</td>
                <td style="text-align:center;">1</td>
                <td>最小缩放倍数</td>
            </tr>
            <tr>
                <td>zoomMax</td>
                <td style="text-align:center;">4</td>
                <td>最大缩放倍数</td>
            </tr>
            <tr>
                <td>bounce</td>
                <td style="text-align:center;">false</td>
                <td>使能回弹</td>
            </tr>
            <tr>
                <td>scrollBar</td>
                <td style="text-align:center;">false</td>
                <td>开启滚动条，若将此参数设为字符串，例scrollBar:'custom'，可对滚动条样式进行自定义</td>
            </tr>
            <tr>
                <td>scrollBarFade</td>
                <td style="text-align:center;">false</td>
                <td>开启滚动条的渐隐模式</td>
            </tr>
            <tr>
                <td>stopPropagation</td>
                <td style="text-align:center;">false</td>
                <td>禁止事件冒泡</td>
            </tr>
            <tr>
                <td>momentum</td>
                <td style="text-align:center;">true</td>
                <td>滚动平滑过渡，如果设为false，手指释放后将马上停止滑动</td>
            </tr>
            <tr>
                <td>autoStyle</td>
                <td style="text-align:center;">true</td>
                <td>为<strong>wrapper</strong> 和<strong>scroller</strong>（<strong>wrapper</strong> 的第一个子元素）添加样式，默认如果<strong>wrapper</strong> 的position为<em>static</em>，将被修改成<em>relative</em>，并将overflow设为<em>hidden</em>，<strong>scroller</strong> 的min-height设为<em>100%</em></td>
            </tr>
            <tr>
                <td>g</td>
                <td style="text-align:center;">0.0008</td>
                <td>模拟重力加速度，g值越小，运动时间越长</td>
            </tr>
        </tbody>
    </table>
    <div class="md-section-divider"></div>
    <h3 data-anchor-id="x1qz" id="常用方法">常用方法</h3><ul data-anchor-id="c75n">
<li>refresh，当scroller或wrapper的高度发生变化时，需要用此方法对JRoll对象进行刷新</li>
</ul><div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="cuwf"><ol class="linenums"><li class="L0"><code><span class="kwd">var</span><span class="pln"> jroll </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">JRoll</span><span class="pun">(</span><span class="str">"#wrapper"</span><span class="pun">);</span></code></li><li class="L1"><code><span class="pln">    </span><span class="com">//do something，例：动态修改scroller的内容，使scroller的高度发生变化</span></code></li><li class="L2"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">refresh</span><span class="pun">();</span></code></li></ol></pre><ul data-anchor-id="6dqy">
<li>scrollTo，该方法用于移动scroller，共三个参数，前两个必填，第三个可选</li>
</ul><div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="te8p"><ol class="linenums"><li class="L0"><code><span class="kwd">var</span><span class="pln"> jroll </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">JRoll</span><span class="pun">(</span><span class="str">"#wrapper"</span><span class="pun">);</span></code></li><li class="L1"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">scrollTo</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="lit">100</span><span class="pun">,</span><span class="pln"> </span><span class="lit">200</span><span class="pun">);</span></code></li></ol></pre><p data-anchor-id="boxp">第一个参数是x偏移量，第二个是y偏移量，第二个是滑动时间（单位ms)，如果想获取当前x,y偏移量，可直接输出<code>jroll.x</code>和<code>jroll.y</code></p><div class="md-section-divider"></div>
    <h3 data-anchor-id="0wu1" id="滑动事件">滑动事件</h3>
    <p data-anchor-id="cuwf">JRoll一共提供6个滑动事件，每个事件都可多次添加行为</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="rns9"><ol class="linenums"><li class="L0"><code><span class="kwd">var</span><span class="pln"> jroll </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">JRoll</span><span class="pun">(</span><span class="str">"#wrapper"</span><span class="pun">);</span></code></li></ol></pre>
    <p data-anchor-id="e934">Ⅰ. scrollStart，滑动开始时执行</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="t52o"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"scrollStart"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">x</span><span class="pun">);</span><span class="pln"> </span><span class="com">//输出当前x偏移量，this指向jroll对象</span></code></li><li class="L2"><code><span class="pln">    </span><span class="pun">});</span></code></li></ol></pre>
    <p data-anchor-id="xp91">Ⅱ. scroll，滑动过程中执行</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="z41a"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"scroll"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        </span><span class="com">//该干嘛干嘛去...</span></code></li><li class="L2"><code><span class="pln">    </span><span class="pun">});</span></code></li></ol></pre>
    <p data-anchor-id="9wir">Ⅲ. scrollEnd，滑动结束时执行</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="2uox"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"scrollEnd"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        </span><span class="com">//该干嘛干嘛去...</span></code></li><li class="L2"><code><span class="pln">    </span><span class="pun">});</span></code></li></ol></pre>
    <p data-anchor-id="bdoa">Ⅳ. zoomStart，开始缩放时执行</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="p2qj"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"zoomStart"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        </span><span class="com">//该干嘛干嘛去...</span></code></li><li class="L2"><code><span class="pln">    </span><span class="pun">});</span></code></li></ol></pre>
    <p data-anchor-id="pyap">Ⅴ. zoom，缩放过程中执行</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="fgrg"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"zoom"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        </span><span class="com">//该干嘛干嘛去...</span></code></li><li class="L2"><code><span class="pln">    </span><span class="pun">});</span></code></li></ol></pre>
    <p data-anchor-id="evsy">Ⅵ. zoomEnd，缩放结束后执行</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="xym7"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"zoomEnd"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        </span><span class="com">//该干嘛干嘛去...</span></code></li><li class="L2"><code><span class="pln">    </span><span class="pun">});</span></code></li></ol></pre>
</div>
